<template>
  <q-page class="q-pa-md">
    <q-btn class="float-right" color="primary" icon="arrow_back" outline title="返回" to="/" />
    <div class="q-pb-md text-h5">订单拣货</div>
    <!--错误提示-->
    <q-banner class="text-white bg-red q-mb-md" dense inline-actions v-if="serverErrorMessage">
      {{ serverErrorMessage }}
      <template v-slot:action>
        <q-btn @click="serverErrorMessage = null" dense flat icon="close" size="sm" />
      </template>
    </q-banner>
    <div class="row q-pt-sm q-col-gutter-sm">
      <div class="col-12">
        <q-icon color="red" name="fas fa-asterisk" size="10px" />
        <span>出货通知单ID</span>
        <easy-input v-model="$d.form.orderId" ref="orderId" @keyup.enter="checkQrCode" @focus="fx.ui.select"
          :error="v$.orderId.$error" :error-message="e$(v$.orderId.$errors)"/>
      </div>
      <div class="col-12">
        <q-icon color="red" name="fas fa-asterisk" size="10px" />
        <span>栈板号(箱号)</span>
        <easy-input v-model="$d.form.lpn" @focus="fx.ui.select" :error="v$.lpn.$error" :error-message="e$(v$.lpn.$errors)"/>
      </div>
      <div class="col-12">
        <q-icon color="red" name="fas fa-asterisk" size="10px" />
        <span>批号或外部批号</span>
        <easy-input v-model="$d.form.lotOrVLot" @focus="fx.ui.select" @keyup.enter="doPickByPda"
          :error="v$.lotOrVLot.$error" :error-message="e$(v$.lotOrVLot.$errors)"/>
      </div>
      <div class="col-12">
        <q-btn class="full-width" color="primary" label="确定拣货" @click="doPickByPda" :loading="submittingState" />
      </div>
    </div>
  </q-page>
</template>

<script lang="ts">
export default {
  name: 'PickOrderStd'
}
</script>

<script lang="ts" setup>

import {computed, nextTick, reactive, ref} from 'vue'
import {useVuelidate} from '@vuelidate/core'
import {playErrorSound, playSuccessSound} from '@njt/wms/helper/audio'
import {QInput} from 'quasar'

let serverErrorMessage = ref('')
let submittingState = ref(false)
const orderId = ref<QInput | null>(null)
const $d = reactive({
  form: {
    // 出货通知单ID
    orderId: null as number | null,
    // 栈板号
    lpn: null as string | null,
    // 批号或外部批号
    lotOrVLot: null as string | null
  }
})

const validators = $f.validators

const rules = {
  orderId: {
    required: validators.required
  },
  lpn: {
    required: validators.required
  },
  lotOrVLot: {
    required: validators.required
  }
}

const v$ = useVuelidate(rules, computed(() => $d.form), {$autoDirty: true})

const checkQrCode = function () {
  $d.form.orderId = Number($f.misc.tryExtractCompactStringWithIndex(String($d.form.orderId), 0))
}

const doPickByPda = function () {
  serverErrorMessage.value = ''
  void v$.value
    .$validate()
    .then((valRes) => {
      if (valRes) {
        submittingState.value = true
        $f.axios
          .post<number>('/wms/work/order/pick-by-order-for-pda', $d.form)
          .then((resp) => {
            $f.ui.showNotifySucceeded(`出货通知单${$d.form.orderId}当前拣货成功${resp.data}笔明细`)
            $d.form.orderId = null
            $d.form.lpn = null
            $d.form.lotOrVLot = null
            v$.value.$reset()
            playSuccessSound()
          })
          .catch((err) => {
            serverErrorMessage.value = $f.getAxiosErrMsg(err)
          })
          .finally(() => {
            submittingState.value = false
            void nextTick(() => {
              orderId.value && orderId.value.focus()
            })
          })
      } else {
        playErrorSound()
      }
    })
}

const fx = $f
const e$ = $f.getFieldErrStr
</script>

<style scoped>

</style>
